<template>
  <div>
      <el-form :model="form1" label-width="auto" style="max-width: 600px">
      <el-radio-group v-model="form1.resource">
          <el-radio :label="0">关闭问诊</el-radio>
          <el-radio :label="1">开启问诊</el-radio>
      </el-radio-group>
      <el-input  v-model="form1.name" placeholder="患者名称/手机号码查询"/>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form>

  <el-table  :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="price" label="金额" width="180" />
      <el-table-column prop="patient" label="患者姓名" width="180" />
      <el-table-column prop="message" label="消息" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" >接诊</el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" >健康档案</el-button>
          </template>
      </el-table-column>
  </el-table>

      <el-dialog v-model="dialogTableVisible" title="查看病人档案" width="800">
          <el-table :data="tableData.splice(0,1)">
              <el-table-column prop="date" label="Date" width="180" />
              <el-table-column prop="price" label="金额" width="180" />
              <el-table-column prop="patient" label="患者姓名" width="180" />
              <el-table-column prop="message" label="消息" width="180" />
              <el-table-column prop="name" label="Name" width="180" />
              <el-table-column prop="address" label="Address" />
          </el-table>
      </el-dialog>

      <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
          <el-form :model="form">
              <el-form-item label="聊天" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="填写生病原因" :label-width="formLabelWidth">
                  <el-select v-model="form.region" placeholder="Please select a zone">
                      <el-option label="Zone No.1" value="shanghai" />
                      <el-option label="Zone No.2" value="beijing" />
                  </el-select>
              </el-form-item>
          </el-form>
          <template #footer>
              <div class="dialog-footer">
                  <el-button type="primary" @click="diagnosisSuccess">Confirm</el-button>
              </div>
          </template>
      </el-dialog>
  </div>
</template>
<script setup name="Doctors">
import { reactive } from 'vue'
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

// do not use same name with ref
const form1 = reactive({
    name: '',
    resource: 0
})
const tableData = [
    {
        date: '2016-05-03',
        price: 100.00,
        patient: '患者1',
        message: '生病原因',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        price: 100.00,
        patient: '患者2',
        message: '生病原因',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        price: 100.00,
        patient: '患者3',
        message: '生病原因',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        price: 100.00,
        patient: '患者4',
        message: '生病原因',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
const gridData = [
    {
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
        date: '2016-05-03',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
]
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

function handleUpdate(row) {
    dialogFormVisible.value = true
}
function diagnosisSuccess() {
    confirm('确认生成诊断报告吗？')
    alert('诊断报告生产成功')
    dialogFormVisible.value = false
}
function handleDelete(row) {
    dialogTableVisible.value = true
}
function onSubmit() {
    alert('调用数据库查询!')
    console.log('调用数据库查询!')
}
</script>
<style scoped>

</style>
